:root {
  --orange: hsla(32, 100%, 50%, 1);
  --yellow: hsla(49, 99%, 50%, 1);
  --lime: hsla(82, 90%, 45%, 1);
  --green: hsla(127, 81%, 41%, 1);
  --red: hsla(342, 93%, 53%, 1);
  --pink: hsla(314, 85%, 45%, 1);
  --blue: hsla(211, 92%, 52%, 1);
  --purple: hsla(283, 92%, 44%, 1);
  --cyan: hsla(195, 98%, 55%, 1);
  --white: hsla(0, 0%, 95%, 1);
  --black: hsla(0, 0%, 10%, 1);

  /* abstract our colours */
  --boxMain: var(--green);
  --boxSecond: var(--lime);
  --boxHigh: var(--red);

  --border: 6px solid var(--black);
  --borderRad: 2px;

  /* dimensions */
  --boxWidth: 800px;
  --boxHeight: 440px;
  --boxDepth: 200px;
}
@media screen and (max-width: 800px) {
  :root {
    --boxWidth: 460px;
    --boxHeight: 600px;
  }
}
* {
  box-sizing: border-box;
}

/* everything has to be pixels for 3D reasons */
body {
  background-color: var(--white);
  min-height: 90vh;
  padding: 4vmax;
  margin: 0px;
  font-family: sans-serif, system-ui;
  color: var(--black);
}

#boombox {
  width: var(--boxWidth);
  height: var(--boxHeight);
  margin: 0px auto;
  perspective: 1000px;
  perspective-origin: 50% 100px;
  transform-style: preserve-3d;
}
.boombox-body {
  position: relative;
  width: var(--boxWidth);
  height: var(--boxHeight);
  transform-style: preserve-3d;
  transform: scale(0.8);
}

[class^="bb"] {
  position: absolute;
  transform-style: preserve-3d;
  background-color: var(--green);
  border: var(--border);
}
.bb-top {
  width: var(--boxWidth);
  height: var(--boxDepth);
  transform: rotateX(-90deg);
  transform-origin: top right;
}
.bb-right {
  width: var(--boxDepth);
  height: var(--boxHeight);
  right: 0px;
  transform: rotateY(-90deg);
  transform-origin: top right;
}
.bb-bottom {
  width: var(--boxWidth);
  height: var(--boxDepth);
  bottom: 0px;
  transform: rotateX(90deg);
  transform-origin: bottom left;
}
.bb-left {
  width: var(--boxDepth);
  height: var(--boxHeight);
  transform: rotateY(90deg);
  transform-origin: top left;
}
.bb-back {
  width: var(--boxWidth);
  height: var(--boxHeight);
  transform: translateZ(-200px) rotateY(180deg);
}

.bb-front {
  /*gradient with two circles for speakers*/
  width: var(--boxWidth);
  height: var(--boxHeight);
  background: var(--boxMain) repeat-x bottom left;
  background-image: radial-gradient(
    circle,
    var(--boxMain) 2vmin,
    var(--black) 2vmin,
    var(--black) 3vmin,
    var(--boxSecond) 3vmin,
    var(--boxSecond) 9vmin,
    var(--black) 9vmin,
    var(--black) 9.5vmin,
    var(--boxSecond) 9.5vmin,
    var(--boxSecond) 12vmin,
    var(--black) 12vmin,
    var(--black) 13vmin,
    var(--boxMain) 13vmin
  );
  background-size: 33.3% 70%;
  border: 6px solid var(--black);
  border-radius: var(--borderRad);
}
/*small screen with one circle*/
@media screen and (max-width: 800px) {
  .bb-front {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 70%;
    background-image: radial-gradient(
      circle,
      var(--boxMain) 4vmin,
      var(--black) 4vmin,
      var(--black) 5vmin,
      var(--boxSecond) 5vmin,
      var(--boxSecond) 21vmin,
      var(--black) 21vmin,
      var(--black) 21.5vmin,
      var(--boxSecond) 21.5vmin,
      var(--boxSecond) 24vmin,
      var(--black) 24vmin,
      var(--black) 25vmin,
      var(--boxMain) 25vmin
    );
  }
}

.master-controls {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(2, 1fr) 12%;
  /*name our grid areas so they are more manipulative later*/
  grid-template-areas:
    "volin panin power"
    "vollab panlab power";
  justify-items: center;
  align-items: center;
  padding: 30px;
  height: 120px;
  background-color: var(--boxSecond);
  border-bottom: var(--border);
}
/* change control grid areas for smaller boom box */
@media screen and (max-width: 800px) {
  .master-controls {
    /*grid-gap: 10px;*/
    grid-template-columns: 16% 1fr 12%;
    grid-template-areas:
      "vollab volin power"
      "panlab panin power";
  }
}
.master-controls input,
.master-controls label {
  display: block;
}
.master-controls label {
  padding-top: 20px;
}
@media screen and (max-width: 800px) {
  .master-controls label {
    padding-top: 6px;
  }
}
.master-controls input::before,
.master-controls input::after {
  line-height: 2;
  color: var(--black);
}
.master-controls input::before {
  padding-right: 1vw;
}
.master-controls input::after {
  padding-left: 1vw;
}

.control-volume {
  grid-area: volin;
}
.control-volume::before {
  content: "min";
}
.control-volume::after {
  content: "max";
}
label[for="volume"] {
  grid-area: vollab;
  margin-top: 10px;
}
.control-panner {
  grid-area: panin;
}
.control-panner::before {
  content: "left";
}
.control-panner::after {
  content: "right";
}
label[for="panner"] {
  grid-area: panlab;
  margin-top: 10px;
}

@media screen and (max-width: 800px) {
  label[for="volume"],
  label[for="panner"] {
    margin-top: 0px;
  }
  .control-volume {
    margin-bottom: 20px;
  }
}

.control-power {
  grid-area: power;
  align-self: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--black);
  border-radius: 20px;
  cursor: pointer;
}
.control-power span {
  display: none;
}

/* tape area ~~~~~~~~~~~~~~~~~~~~~*/
.tape {
  display: grid;
  grid-template-rows: 222px 80px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "tape tape tape tape tape"
    "back play play play next";

  width: 300px;
  margin: 0px auto;
  background: var(--boxMain) no-repeat center center;
  background-image: radial-gradient(
      circle at 80px,
      var(--boxSecond) 20px,
      var(--black) 20px,
      var(--black) 25px,
      transparent 25px
    ),
    radial-gradient(
      circle at 210px,
      var(--boxSecond) 20px,
      var(--black) 20px,
      var(--black) 25px,
      transparent 25px
    ),
    linear-gradient(
      180deg,
      transparent 93px,
      var(--black) 93px,
      var(--black) 101px,
      var(--boxHigh) 101px,
      var(--boxHigh) 201px,
      var(--black) 201px,
      var(--black) 209px,
      transparent 209px
    ),
    radial-gradient(
      circle at 80px,
      var(--boxHigh) 50px,
      var(--black) 50px,
      var(--black) 58px,
      transparent 58px
    ),
    radial-gradient(
      circle at 210px,
      var(--boxHigh) 50px,
      var(--black) 50px,
      var(--black) 58px,
      transparent 58px
    );
  background-size: 100% 100%, 100% 100%, 42% 100%, 100% 100%, 100% 100%;
  border: var(--border);
  border-bottom-width: 0px;
  border-radius: var(--borderRad);
}
@media screen and (max-width: 800px) {
  .tape {
    /*width: 80%; margin-top: 30vh;*/
    margin-top: 220px;
    grid-template-rows: 168px 74px;
    background-image: radial-gradient(
        circle at 80px,
        var(--boxSecond) 20px,
        var(--black) 20px,
        var(--black) 25px,
        transparent 25px
      ),
      radial-gradient(
        circle at 210px,
        var(--boxSecond) 20px,
        var(--black) 20px,
        var(--black) 25px,
        transparent 25px
      ),
      linear-gradient(
        180deg,
        transparent 63px,
        var(--black) 63px,
        var(--black) 71px,
        var(--boxHigh) 71px,
        var(--boxHigh) 171px,
        var(--black) 171px,
        var(--black) 179px,
        transparent 179px
      ),
      radial-gradient(
        circle at 80px,
        var(--boxHigh) 50px,
        var(--black) 50px,
        var(--black) 58px,
        transparent 58px
      ),
      radial-gradient(
        circle at 210px,
        var(--boxHigh) 50px,
        var(--black) 50px,
        var(--black) 58px,
        transparent 58px
      );
  }
}
audio {
  grid-area: tape;
}
[class^="tape-controls"] {
  border: none;
}
[class^="tape-controls"] span {
  display: none;
}
.tape-controls-play {
  grid-area: play;
}

/* ~~~~~~~~~~~~~~~~ All the crazy range styling */
input[type="range"] {
  -webkit-appearance: none;
  width: 30vw;
  background: transparent;
}
/* set min & max for different screen sizes */
@media screen and (min-width: 1100px) {
  input[type="range"] {
    width: 270px;
  }
}
@media (max-width: 680px) {
  input[type="range"] {
    width: 180px;
  }
}
@media (max-width: 380px) {
  input[type="range"] {
    width: 130px;
  }
}

input[type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -1vh;
  height: 4vh;
  width: 2vw;
  border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  height: 4vh;
  width: 2vw;
  border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}
input[type="range"]::-ms-thumb {
  height: 4vh;
  width: 2vw;
  border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}
input[type="range"]::-moz-range-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}
input[type="range"]::-ms-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}

input[type="range"]:focus {
  outline: none;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: var(--boxMain);
}

/*~~~~~~~~~~~~~~~~ the play pause & power icons*/
[data-playing] {
  background: transparent
    url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="black" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
  cursor: pointer;
}
[data-playing]:hover {
  background: transparent
    url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="hsla(32, 100%, 50%, 1)" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
}
[data-playing="true"] {
  background: transparent
    url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="black" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
}
[data-playing="true"]:hover {
  background: transparent
    url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="hsla(32, 100%, 50%, 1)" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
}
[data-power] {
  background: var(--boxSecond)
    url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="black" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
}
[data-power]:hover,
[data-power="on"] {
  background: var(--boxHigh)
    url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="black" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
}

/* controls ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#move-controls {
  position: fixed;
  bottom: 0px;
  right: 0px;
  display: flex;
  justify-content: flex-end;
  background: hsla(0, 0%, 100%, 0.5);
  border: var(--border);
}
/* little hack for small screens to make sure you can press play */
@media screen and (max-width: 800px) {
  body {
    padding-bottom: 70px;
  }
}
#move-controls h3 {
  display: none;
}
.move-controls_xy,
.move-controls_rotate {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, 10vmin);
  margin: 3vmin;
}
.move-controls_xy button:nth-of-type(1),
.move-controls_rotate button:nth-of-type(1) {
  grid-area: 2 / 1 / 3 / 2;
}
.move-controls_xy button:nth-of-type(2),
.move-controls_rotate button:nth-of-type(2) {
  grid-area: 1 / 2 / 2 / 3;
}
.move-controls_xy button:nth-of-type(3),
.move-controls_rotate button:nth-of-type(3) {
  grid-area: 2 / 3 / 3 / 4;
}
.move-controls_xy button:nth-of-type(4),
.move-controls_rotate button:nth-of-type(4) {
  grid-area: 3 / 2 / 4 / 3;
}

.move-controls_z {
  display: grid;
  justify-items: center;
}
.move-controls_z button:nth-of-type(1) {
  align-self: end;
}
.move-controls_z button:nth-of-type(2) {
  align-self: start;
}

#move-controls button {
  display: inline-block;
  margin: 0px;
  padding: 3vmin 4vmin;
  background-color: var(--green);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 70%;
  border: var(--border);
  border-radius: var(--borderRad);
  cursor: pointer;
}
@media screen and (max-width: 800px) {
  #move-controls button {
    padding: 2vmin 3vmin;
  }
}

#move-controls button:hover {
  background-color: var(--lime);
}
#move-controls button span {
  display: none;
}

/* control icons */
#move-controls button[data-control="left"] {
  background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M187.297,67.908h-82.468V17.505c0-7.606-9.242-11.446-14.575-6.044L8.995,93.147c-3.34,3.341-3.34,8.674,0,12.016 l81.259,81.685c5.402,5.404,14.575,1.564,14.575-6.041v-50.334h82.468c4.691,0,8.53-3.839,8.53-8.531V76.44C195.827,71.747,191.988,67.908,187.297,67.908z"/></svg>');
}
#move-controls button[data-control="up"] {
  background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M132.405,185.293v-82.468h50.403c7.606,0,11.446-9.242,6.044-14.575L107.167,6.991c-3.341-3.34-8.674-3.34-12.016,0 L13.467,88.25c-5.404,5.402-1.564,14.575,6.041,14.575h50.334v82.468c0,4.691,3.839,8.53,8.531,8.53h45.501 C128.566,193.823,132.405,189.985,132.405,185.293z"/></svg>');
}
#move-controls button[data-control="right"] {
  background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M15.021,130.402h82.468v50.403c0,7.606,9.242,11.446,14.575,6.044l81.259-81.686c3.34-3.341,3.34-8.673,0-12.015 l-81.259-81.685c-5.402-5.404-14.575-1.564-14.575,6.041v50.334H15.021c-4.691,0-8.53,3.839-8.53,8.531v45.5 C6.491,126.563,10.33,130.402,15.021,130.402z"/></svg>');
}
#move-controls button[data-control="down"] {
  background-image: url('data:image/svg+xml; charset=utf8,<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M69.913,13.018v82.468H19.509c-7.606,0-11.446,9.241-6.043,14.574l81.685,81.259c3.341,3.34,8.673,3.34,12.015,0 l81.685-81.259c5.404-5.402,1.564-14.574-6.041-14.574h-50.334V13.018c0-4.691-3.839-8.53-8.531-8.53h-45.5 C73.752,4.488,69.913,8.326,69.913,13.018z"/></svg>');
}

#move-controls button[data-control="back"] {
  background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M142.706,182.798l-13.872-81.329l37.906-0.012c5.721-0.002,3.264-9.116-3.361-14.374l-53.61-80.126 c-0.319-3.294-0.823-3.294-1.402,0l-59.94,80.16c-7.087,5.331-10.219,14.378-4.5,14.377l37.855-0.012l-20.336,81.342 c-1.157,4.628,3.1,8.411,9.46,8.409l61.672-0.02C138.938,191.212,143.495,187.426,142.706,182.798z"/></svg>');
}
#move-controls button[data-control="forward"] {
  background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M90.711,12.843L74.096,93.626H28.482c-6.883,0-15.651,9.053-13.343,14.278l77.002,79.599 c4.844,3.271,12.844,3.271,17.784,0l79.272-79.599c2.421-5.293-6.051-14.278-12.933-14.278h-45.551l-14.347-80.783 c-0.815-4.596-2.861-8.356-4.545-8.356H95.492C93.808,4.487,91.656,8.247,90.711,12.843z"/></svg>');
}

#move-controls button[data-control="rotate-left"] {
  background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.101 111.617 190.645 83.712"><path d="M12.402,114.717h51.956c8.287,0,12.437,10.02,6.577,15.879l-16.18,16.181c12.116,11.345,27.84,17.563,44.521,17.549 c30.004-0.027,55.93-20.597,63.09-49.161c0.521-2.079,2.372-3.547,4.516-3.547h22.208c2.905,0,5.113,2.639,4.575,5.494 c-8.385,44.53-47.482,78.218-94.449,78.218c-25.752,0-49.139-10.129-66.395-26.619l-13.842,13.842 c-5.859,5.859-15.878,1.709-15.878-6.577v-51.956C3.101,118.882,7.265,114.717,12.402,114.717z"/></svg>');
}
#move-controls button[data-control="rotate-up"] {
  background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="56.567 58.151 83.712 190.644"><path d="M137.18,67.453v51.955c0,8.287-10.02,12.438-15.879,6.577l-16.182-16.181c-11.344,12.116-17.562,27.84-17.548,44.521 c0.027,30.004,20.597,55.93,49.161,63.09c2.078,0.521,3.547,2.372,3.547,4.516v22.208c0,2.905-2.639,5.113-5.494,4.575 c-44.53-8.385-78.218-47.482-78.218-94.449c0-25.752,10.129-49.139,26.619-66.394L69.345,74.029 c-5.859-5.859-1.709-15.878,6.577-15.878h51.955C133.014,58.151,137.18,62.315,137.18,67.453z"/></svg>');
}
#move-controls button[data-control="rotate-right"] {
  background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.101 111.617 190.645 83.712"><path d="M193.745,124.019v51.956c0,8.286-10.019,12.437-15.878,6.577l-13.842-13.842c-17.256,16.49-40.643,26.619-66.395,26.619 c-46.967,0-86.064-33.688-94.449-78.218c-0.538-2.855,1.67-5.494,4.575-5.494h22.208c2.144,0,3.995,1.468,4.516,3.547 c7.16,28.564,33.086,49.134,63.09,49.161c16.682,0.015,32.405-6.204,44.521-17.549l-16.181-16.181 c-5.86-5.859-1.71-15.879,6.577-15.879h51.955C189.581,114.717,193.745,118.882,193.745,124.019z"/></svg>');
}
#move-controls button[data-control="rotate-down"] {
  background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="56.567 58.151 83.712 190.645"><path d="M127.877,248.795H75.922c-8.286,0-12.437-10.02-6.577-15.879l13.842-13.842c-16.49-17.255-26.619-40.642-26.619-66.394 c0-46.967,33.688-86.064,78.218-94.449c2.855-0.538,5.494,1.67,5.494,4.575v22.208c0,2.144-1.469,3.995-3.547,4.516 c-28.564,7.16-49.134,33.086-49.161,63.09c-0.015,16.682,6.204,32.405,17.548,44.521l16.182-16.181 c5.859-5.86,15.879-1.71,15.879,6.577v51.954C137.18,244.631,133.014,248.795,127.877,248.795z"/></svg>');
}
